<template>
  <div>
    <ShopHeader></ShopHeader>
    <div class="tab">
      <div class="tab-item">
        <router-link to="/shop/goods" replace>点餐</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/ratings" replace>评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/shop/info" replace>商家</router-link>
      </div>
    </div>
    <!-- <keep-alive>
      <router-view></router-view>
    </keep-alive> -->
    <router-view></router-view>
  </div>
</template>

<script>
  import ShopHeader from '../../components/ShopHeader/ShopHeader'
  export default {
    name: 'Shop',
    mounted() {
      this.$store.dispatch('getShopInfo')
    },
    components:{
      ShopHeader,
    },
  }
</script>

<style lang="less">
  @import '../../common/less/mixins.less';
  .tab {
    height: 40px;
    line-height: 40px;
    background: #fff;
    .bottom-border-1px(rgba(7, 17, 27, .1));
    .tab-item {
      float: left;
      width: 33.3333%;
      text-align: center;
      font-size: 14px;
      color: rgba(77, 85, 93, 1);
      a {
        display: block;
        position: relative;
        &.router-link-active {
          color: #02a774;
          &::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 1px;
            width: 35px;
            height: 2px;
            transform: translateX(-50%);
            background: #02a774;
          }
        }
      }
    }
  }
</style>
